<script setup>
/**
 * & 文件引入区域
 */
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/**
 * & 注册区
 */

/**
 * & 变量声明区
 */
const router = useRouter();

/**
 * & 函数区
 */
const toCabinFun = () => {
  router.push({
    path: "/cabin",
  });
};
</script>

<template>
  <div class="TicketDetail">
    <div class="top">
      <TicketPageTop>
        <div class="return">
          <div class="text">Guangzhou</div>
          <img src="/images/Shop/returnLogo.png" alt="" class="logo" />
          <div class="text">Shanghai</div>
        </div>
      </TicketPageTop>
    </div>

    <div class="dateChoose">
      <div :class="['item', i == 0 ? 'con' : '']" v-for="(item, i) in 5" :key="i">
        <span class="date">7.31</span>
        <span>Today</span>
      </div>
      <img src="/images/Shop/dateLogo.png" alt="" class="logo" />
    </div>

    <div class="flightList">
      <div class="item" v-for="(item, i) in 2" :key="i" @click="toCabinFun()">
        <img src="/images/Shop/filghtLogo.png" alt="" class="logo" />

        <div class="time">
          <div class="text">
            <span>18:20</span>
            <span class="vl">CAN T1</span>
          </div>

          <div class="arrow">
            <div class="needTime">2h20m</div>
            <img src="/images/Shop/flightArrow.png" alt="" />
          </div>

          <div class="text">
            <span>20:40</span>
            <span class="vl">SHA T1</span>
          </div>
        </div>

        <div class="price">
          <div class="num"><span>Pi</span> 68</div>
          <div class="type">Economy Class</div>
        </div>

        <div class="id">CA1829</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.TicketDetail {
  >.top {
    .return {
      display: flex;
      align-items: center;
      margin-left: 20rem;

      width: max-content;

      position: absolute;
      left: 0;
      right: 0;
      margin: auto;

      >.text {
        font-size: 16rem;
        font-weight: 400;
        line-height: 24rem;
        color: #000;
      }

      >.logo {
        width: 32rem;
        margin: 0 45rem;
      }
    }
  }

  >.dateChoose {
    position: relative;
    padding-left: 18rem;

    display: flex;
    align-items: center;

    width: 100%;
    box-sizing: border-box;
    overflow-x: scroll;

    &::-webkit-scrollbar {
      display: none;
    }

    >.item {
      border-radius: 10rem;
      background: #fff;

      padding: 3rem 8rem 5rem;

      display: flex;
      flex-direction: column;

      margin-right: 8rem;
      align-items: center;

      >span {
        font-size: 12rem;
        font-weight: 400;
        line-height: 14rem;
      }

      >.date {
        margin-bottom: 5rem;
        font-size: 16rem;
        line-height: 18rem;
      }

      &.con {
        background: #642e8e;
        color: #fff;
      }
    }

    >.logo {
      position: absolute;
      width: 40rem;

      right: 6rem;
    }
  }

  >.flightList {
    padding: 0rem 6rem;
    margin-top: 18rem;

    >.item {
      display: flex;
      border-radius: 10rem;
      padding-bottom: 50rem;
      margin-bottom: 15rem;
      box-shadow: 0rem 5rem 20rem -10rem rgba(197, 197, 197, 0.3);
      position: relative;

      >.logo {
        width: 37rem;
        margin: 13rem 10rem 0rem 11rem;
      }

      >.time {
        display: flex;
        margin-top: 7rem;

        >.text {
          display: flex;
          flex-direction: column;
          align-items: center;

          font-size: 16rem;
          font-weight: 400;
          line-height: 18rem;
          color: #000;

          >.vl {
            font-size: 12rem;
            line-height: 14rem;
            margin-top: 8rem;
          }
        }

        >.arrow {
          position: relative;
          margin: 0 8rem;

          >img {
            width: 110rem;
            margin-top: 5rem;
          }

          >.needTime {
            position: absolute;
            top: -10rem;

            width: 100%;

            font-size: 12rem;
            letter-spacing: 0rem;
            line-height: 14rem;
            color: #8f7c7c;
            text-align: center;
          }
        }
      }

      >.price {
        flex: 1;
        margin-right: 4rem;
        margin-top: 8rem;

        display: flex;
        flex-direction: column;
        align-items: flex-end;

        >.num {
          margin-right: 13rem;

          font-size: 20rem;
          font-weight: 500;
          line-height: 28rem;
          color: #642e8e;

          >span {
            font-size: 14rem;
            color: #999;
          }
        }
      }

      >.id {
        position: absolute;
        font-size: 12rem;
        font-weight: 400;
        line-height: 14rem;
        color: #595252;

        left: 55rem;
        bottom: 7rem;
      }
    }
  }
}
</style>
